<template>
	<div class="wenzi_nav">
		<div class="show_nav" ref='Sblock' :class="activet==true?'s_block':''">
			<van-tabs background="red" :border="true" line-height="0">
			  <van-tab v-for="val,index in flow" :key='index' :title="val">
			  </van-tab>
			</van-tabs>
		</div>
		<div class="wenzi">
			<div class="title1 fl">
				<span class="iia"></span>
				优质鲜花花材
			</div>
			<div class="title2 fl">
				<span class="iia"></span>
				12年知名品牌
			</div>
			<div class="title3 fl">
				<span class="iia"></span>
				高效鲜花速递
			</div>
		</div>
	</div>
</template>

<script>
	import Vue from 'vue';
	import { Tab, Tabs } from 'vant';
	Vue.use(Tab);
	Vue.use(Tabs);
	export default {
		data(){
			return {
				flow:['爱情鲜花','友情鲜花','亲情鲜花','开业鲜花'],
				activet:''
			}
		},
		mounted() {
			window.addEventListener('scroll',this.Socll)
		},
		methods:{
				  Socll(){
					  let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
						let offsetTop = this.$refs.Sblock.offsetTop
						if(scrollTop>100){
							this.activet = true
						}else{
							this.activet = false
						}
				  }
		},
		destroyed () {
		  window.removeEventListener('scroll', this.Socll)
		},
		components:{
			// Tab,Tabs
		}
	}
</script>

<style>
	
	.wenzi_nav {
		width: 100%;
		background-color: #fff;
		padding: 0.3rem 0;
	}
	
	.wenzi {
		width: 95%;
		margin: 0 auto;
		height: 24px;
		line-height: 24px;
	}
	.wenzi::after{
		content: '';
		clear: both;
	}
	.wenzi .fl {
		width: 33.33%;
		font-size: 0.5rem;
		color: #555;
	}
	.title1{
		text-align: left;
	}
	.title2{
		text-align: center;
	}
	.title3{
		text-align: right;
	}
	.title1 .iia{
		width: 21px;
		height: 21px;
		display: inline-block;
		background: url(../../../assets/imgs/icon5.png) -36px -3px no-repeat;
		vertical-align: middle;
		margin-right: 0.1rem;
		background-size: 120px;
	}
	.title2 .iia {
		width: 21px;
		height: 21px;
		display: inline-block;
		background: url(../../../assets/imgs/icon5.png) -61px -3px no-repeat;
		vertical-align: middle;
		margin-right: 0.1rem;
		background-size: 120px;
	}
	.title3 .iia {
		width: 21px;
		height: 21px;
		display: inline-block;
		background: url(../../../assets/imgs/icon5.png) -80px -3px no-repeat;
		vertical-align: middle;
		margin-right: 0.1rem;
		background-size: 120px;
	}
	.van-search__content{
		border-radius: 3.125rem;
	}
	.show_nav{
		width: 100%;
		z-index: 999;
		display: none;
	}
	.s_block{
		top: 0;
		position: fixed;
		display: block;
	}
	/* .van-tab{
		color: white !important; 
	} */
</style>
